<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/common.css"/>
    <style>
        iframe{
            height: 100vh;
            width: 100%;
        }
        .tabBar{
            z-index: 1;
            width: 100%;
            height: 80px;
            position: absolute;
            bottom: 0;
            background: white;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            box-shadow: -3px 2px 20px 0 rgba(0,0,0,0.5);
        }
        .tabBarItem{
            z-index: 2;
            position: relative;
            display: inline-block;
            height: 100%;
            width: 19vw;
            background: white;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        img{
            height: 100%;
            width: 100%;
            object-fit: contain;
        }
        .drawerBox{
            padding: 20px;
        }
        .drawerBoxItem{
            padding: 2vh;
            height: 6vh;
            color: white;
            font-weight: bolder;
            margin-top: 15px;
            background: #409eff;
            border-radius: 10px;
        }
        .blank{
            height: 100%;
            width: 100%;
            line-height: 100%;
            text-align: center;
            font-weight: lighter;
            color: #8c939d;
            font-size: 0.5em;
            padding-top: 10vh;
        }
    </style>
</head>
<body>
<div id="app">
    <iframe :src="iframeUrl"></iframe>
    <div class="tabBar" id="myTabBar">
        <div class="tabBarItem" @click="pushButton(1)">
            <div>
                <img :src="tabbaricon1">
            </div>
        </div>

        <div class="tabBarItem" @click="pushButton(2)">
            <div>
                <img :src="tabbaricon2">
            </div>
        </div>

        <div class="tabBarItem" @click="pushButton(3)">
            <div>
                <img :src="tabbaricon3">
            </div>
        </div>

        <div class="tabBarItem" @click="pushButton(4)">
            <div>
                <img :src="tabbaricon4">
            </div>
        </div>

        <div class="tabBarItem" style="position: absolute;right: 0;" @click="pushButton(5)">
            <div>
                <img :src="tabbaricon5">
            </div>
        </div>
    </div>
<!--    点击中间的灯泡出现课程的抽屉 -->
    <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false"
            direction="btt"
            size="80%"
    >
        <div class="drawerBox">
            <div>
                <img src="/image/baiduIcon.png" style="display: block;height: 50px;margin: 0 auto">
            </div>
            <div class="drawerBoxItem" v-for="item in drawerBoxItem" >
                <div @click="drawerBoxItemto(item.url)">{{item.title}}</div>
            </div>
        </div>
        <div class="blank">
            没有更多了~
        </div>
    </el-drawer>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el : "#app",
        mounted(){
            if (this.iframeUrl === '/') {
                top.location.href = '/'
            }
        },
        methods : {
            pushButton(index){
                console.log(index);
                //按钮变换  iframeUrl变换
                this.tabbaricon1 = '/image/zhuye.png'
                this.tabbaricon2 = '/image/tongji.png'
                this.tabbaricon3 = '/image/upload.png'
                this.tabbaricon4 = '/image/xiaoxi.png'
                this.tabbaricon5 = '/image/wode.png'
                switch (index) {
                    case 1:
                        this.tabbaricon1 = '/image/zhuye_change.png';
                        this.iframeUrl = this.iframeUrls[0]
                        break;
                    case 2 :
                        this.tabbaricon2 = '/image/tongji_change.png';
                        this.iframeUrl = this.iframeUrls[1]
                        break;
                    case 3 :
                        this.tabbaricon3 = '/image/upload.png';
                        this.drawer = true;
                        break;
                    case 4 :
                        this.tabbaricon4 = '/image/xiaoxi_change.png';
                        this.iframeUrl = this.iframeUrls[2]
                        break;
                    case 5 :
                        this.tabbaricon5 = '/image/wode_change.png';
                        this.iframeUrl = this.iframeUrls[3]
                        break;
                }
                if (this.iframeUrl === '/') {
                    top.location.href = '/'
                }
            },
            drawerBoxItemto(url){
                top.location.href = url
            }
        },
        data(){
            return {
                drawer: false,
                iframeUrl : '/mainPage/zhuye',
                iframeUrls : [
                    '/mainPage/zhuye',
                    '/mainPage/fenxi',
                    '/mainPage/xiaoxi',
                    '/mainPage/wode',
                ],
                tabbaricon1 : '/image/zhuye.png',
                tabbaricon2 : '/image/tongji.png',
                tabbaricon3 : '/image/upload.png',
                tabbaricon4 : '/image/xiaoxi.png',
                tabbaricon5 : '/image/wode.png',
                drawerBoxItem : [
                    {
                        title : '百度架构师手把手带你零基础实践深度学习',
                        url : 'https://aistudio.baidu.com/aistudio/course/introduce/1297?ad-from=yunxi1'
                    },
                    {
                        title : '高层API助你快速上手深度学习',
                        url : 'https://aistudio.baidu.com/aistudio/course/introduce/6771?ad-from=yunxi2'
                    },
                    {
                        title : '基于深度学习的自然语言处理',
                        url : 'https://aistudio.baidu.com/aistudio/course/introduce/24177?ad-from=yunxi3'
                    },
                    {
                        title : '动手学OCR',
                        url : 'https://aistudio.baidu.com/aistudio/course/introduce/25207?ad-from=yunxi4'
                    },
                    {
                        title : '飞桨产业实践范例',
                        url : 'https://aistudio.baidu.com/aistudio/course/introduce/25314?ad-from=yunxi5'
                    },
                ],
            }
        }
    })
</script>
</html>